import { ref } from 'vue'
import { useRoute, onBeforeRouteUpdate } from 'vue-router'
import { findTopCategory } from '@/api/category'

// 目标: 路由切换之后 让获取分类的接口使用最新的id参数获取新数据然后渲染
// 1. 如何得知路由切换了？ onBeforeRouteUpdate
// 2. 如何获取接口数据？ fetchCategoryData()

export function useCategory () {
  // 通过路由参数id获取分类数据 渲染页面中
  const categoryData = ref({})
  const route = useRoute()
  const fetchCategoryData = async (id) => {
    // 如何在setup中获取路由参数 useRoute() -> route 等价于this.$route
    const res = await findTopCategory(id)
    categoryData.value = res.result
  }
  fetchCategoryData(route.params.id)

  // 监听路由的变化
  onBeforeRouteUpdate((to) => {
    console.log('路由变化了', to)
    // 调用函数简单 拿到最新的切换路由之后的新参数
    const newId = to.params.id
    fetchCategoryData(newId)
  })
  return {
    categoryData
  }
}
